<template>
  <div class="main">
    <div class="container">
      <div class="list" v-for="(item, index) in modelList" :key="index">
        <div class="title">
          <div class="line"></div>
          <div class="text" v-text="'模型' + (index + 1)"></div>
        </div>
        <div class="item">
          <div class="type">
            <div class="sub-title" v-text="item.optionContentType ? '统计模型名称' : '模型类型'"></div>
            <img :src="addIcon" class="add" v-if="!item.isEditShow && item.isSaveShow" @click="toTypePage(index)">
          </div>
          <div class="content" v-text="item.optionContentType" v-if="item.optionContentType" />
          <van-divider />

          <div v-if="!item.optionTitle">
            <div class="sub-title">统计模型名称</div>
            <van-field :border="false" v-model="name" placeholder="请输入统计模型名称" class="name" />
            <van-divider />
          </div>


          <div class="sub-title">统计描述</div>
          <div class="content" v-text="item.optionDescribe" v-if="item.optionDescribe" />
          <van-field v-model="desc" rows="2" autosize type="textarea" maxlength="500"
            show-word-limit name="content" placeholder="请输入统计描述" class="desc"
            v-else />
          <van-divider />
          <div v-if="item.optionAnswer.length > 0 && item.optionContentType !== '数字选择器'">
            <div class="sub-title">统计选项</div>
            <van-radio-group direction="horizontal" v-model="select" v-if="item.optionContentType === '单选'">
              <van-radio :name="selectItem" v-for="selectItem in item.optionAnswer">
                <template #icon="props">
                  <img class="img-icon"
                    :src="props.checked ? icons.checkedIcon : icons.unCheckIcon" />
                </template>
                {{ selectItem.name }}
              </van-radio>
            </van-radio-group>
            <div class="multi-content" v-else-if="item.optionContentType === '多选'">
              <div class="multi_container" v-for="selectItem in item.optionAnswer">
                <div class="check" @click="selectItem.checked = !selectItem.checked">
                  <img :src="icons.multiCheckIcon" v-if="selectItem.checked" class="icon">
                </div>
                <div class="text" v-text="selectItem.name"></div>
              </div>
            </div>
            <van-divider />
          </div>
          <div class="operation">
            <div class="edit" @click="addModel(item)" v-if="index === modelList.length - 1">新增</div>
            <div class="edit" @click="edit(item)" v-if="item.isEditShow">编辑</div>
            <div class="edit" @click="saveItem(item)" v-if="item.isSaveShow">保存</div>
            <div class="delete" @click="deleteModel(index)">删除</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tab-bottom">
    <div class="confirm" @click="save">保 存</div>
    <div class="reset" @click="reset">重 置</div>
  </div>
  <router-view @callback="acceptParams" />
</template>
<script lang="ts" setup>import { onMounted, reactive, ref } from 'vue';
import unCheckIcon from '@/assets/imgs/workbench/wb_uncheck.png';
import checkIcon from '@/assets/imgs/workbench/wb_checked.png';
import addIcon from '@/assets/imgs/workbench/wb_edit_add.png';
import multiCheckIcon from '@/assets/imgs/workbench/wb_target_checked.png';
import router from '@/router';
import { getModelId } from '@/api/ordertask';
import Toast from 'vant/lib/toast';
import { useRoute } from 'vue-router';

const route = useRoute()
const emit = defineEmits(['params'])
const icons = reactive({
  checkedIcon: checkIcon,
  unCheckIcon: unCheckIcon,
  addIcon: addIcon,
  multiCheckIcon: multiCheckIcon
})
//选项选中
const select = ref()
//item选中
const selectIndex = ref()
//名称
const name = ref('')
//描述
const desc = ref('')

const modelList = ref([{
  optionContentType: '',
  optionTitle: '',
  optionDescribe: '',
  optionAnswer: [] as any,
  isSaveShow: true,
  isEditShow: false
}])

const toTypePage = (index: any) => {
  selectIndex.value = index

  router.push(route.path + '/option');
}

const addModel = (item: any) => {
  modelList.value.push({
    optionContentType: '',
    optionTitle: '',
    optionDescribe: '',
    optionAnswer: [] as any,
    isSaveShow: true,
    isEditShow: false
  })
  if (item.isEditShow || item.isSaveShow) return
  item.isEditShow = true
  item.isSaveShow = false
}

//改变编辑的可视状态 并且显示保存按钮
const edit = (item: any) => {
  item.isEditShow = false
  item.isSaveShow = true
  name.value = item.optionTitle
  desc.value = item.optionDescribe
  item.optionTitle = ''
  item.optionDescribe = ''
}
//保存
const saveItem = (item: any) => {
  item.isEditShow = true
  item.isSaveShow = false
  item.optionTitle = name.value
  item.optionDescribe = desc.value
  name.value = ''
  desc.value = ''
}

//删除模板
const deleteModel = (targetIndex: any) => {
  modelList.value = modelList.value.filter((_parent, index) => targetIndex !== index)
}

//保存 提交数据获取模板id
const save = async () => {
  let submitData = modelList
  submitData.value.map((item:any) => {
    delete item.isEditShow
    delete item.isSaveShow
    const answers = []
    for(let i=0;i<item.optionAnswer.length;i++){
      answers.push(item.optionAnswer[i].name)
    }
    item.optionAnswer = answers
    return item
  })
  const response = await getModelId({
    data: submitData.value
  })
  var id = ''
  if (response.code === 0) {
    Toast({
      message: '保存成功',
      position: 'bottom',
    });
    id = response.data
  }
  emit('params', id, '2')
  localStorage.setItem('modelId', id)
  router.back()
}

const reset = () => {
  modelList.value = [{
    optionContentType: '',
    optionTitle: '',
    optionDescribe: '',
    optionAnswer: [] as any,
    isSaveShow: true,
    isEditShow: false
  }]
}

const acceptParams = (item: any) => {
  if (item === null) return
  const options = JSON.parse(item)
  modelList.value[selectIndex.value].optionContentType = options.optionContentType
  modelList.value[selectIndex.value].optionAnswer = options.optionAnswer
}
onMounted(() => {
  if (localStorage.getItem('model') !== null) {
    modelList.value = JSON.parse(localStorage.getItem('model') || '[]')
    if (modelList.value.length === 1) {
      modelList.value[0].isSaveShow = true
      modelList.value[0].isEditShow = false
    } else {
      for (let i = 0; i < modelList.value.length; i++) {
        const item = modelList.value[i]
        if (i === modelList.value.length - 1) {
          item.isSaveShow = true
          item.isEditShow = false
        } else {
          item.isSaveShow = false
          item.isEditShow = true
        }
      }
    }
  }
})
</script>
<style lang="scss" scoped>
.main {
  background-color: #F1F6F9;
  position: absolute;
  left: 0;
  top: 44px;
  right: 0;
  bottom: 0;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 0 12px 62px 12px;
  box-sizing: border-box;

  .list {
    height: auto;
    display: flex;
    flex-direction: column;
    margin-top: 16px;

    .title {
      display: flex;
      align-items: center;

      .line {
        width: 4px;
        height: 16px;
        margin-right: 8px;
        background-color: $primary-color;
      }

      .text {
        font-weight: 700;
        text-align: left;
        color: #181818;
        line-height: 12px;
        font-size: 18px;
      }
    }

    .item {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 12px 16px;
      margin-top: 16px;
      background: #ffffff;
      border-radius: 5px;
      box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
      box-sizing: border-box;

      .type {
        display: flex;

        .add {
          width: 12px;
          height: 12px;
          margin-left: auto;
        }
      }

      .name {
        background-color: #FFFFFF;
        border: 0.5px solid #F7F7F7;
        border-radius: 5px;
        font-size: 10px;
        margin-top: 8px;
        padding: 0 0 0 14px;
        background: url('../../../assets/imgs/workbench/wb_bi_input.png');
      }

      .sub-title {
        font-size: 14px;
        font-weight: bold;
        text-align: left;
        color: #1f2e4c;
      }

      .desc {
        background-color: #FFFFFF;
        border: 0.5px solid #F7F7F7;
        border-radius: 5px;
        font-size: 10px;
        margin-top: 8px;
        padding: 0 0 0 14px;
        background: url('../../../assets/imgs/workbench/wb_bi_input.png');

        &:deep(.van-field__word-limit) {
          font-size: 7px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          color: #a9a9a9;
          margin-right: 2px;
          text-align: right;
        }

        &:after {
          content: none;
        }
      }

      .multi-content {
        display: flex;
        flex-wrap: wrap;
        margin-top: 5px;

        .multi_container {
          height: auto;
          display: flex;
          max-width: 100%;
          align-items: center;
          box-sizing: border-box;
          margin-right: 5px;

          .check {
            width: 12px;
            height: 12px;
            border: 0.5px solid #dedede;
            border-radius: 2.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;

            .icon {
              width: 100%;
              height: 8px;
            }
          }

          .text {
            font-size: 14px;
            font-weight: bold;
            text-align: left;
            color: #181818;
            line-height: 16px;
            margin-left: 8px;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .content {
        font-size: 10px;
        font-weight: 500;
        color: #181818;
        line-height: 20px;
        margin-top: 6px;
      }

      &:deep(.van-radio__icon) {
        flex: none;
        display: flex;
        font-size: 10px;
        align-items: center;
        justify-content: center;

        .img-icon {
          width: 8px;
          height: 8px;
        }
      }

      &:deep(.van-radio__label) {
        font-size: 10px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        text-align: left;
        color: #646464;
        line-height: 25px;
        margin-left: 4px;
      }


      .operation {
        height: 30px;
        display: flex;

        .edit {
          height: 100%;
          flex: 1;
          font-size: 14px;
          font-weight: bold;
          text-align: center;
          color: #4c69dc;
          background: #f1f4ff;
          border-radius: 5px;
          line-height: 30px;
          margin-right: 12px;
        }

        .delete {
          height: 100%;
          flex: 1;
          font-size: 14px;
          font-weight: bold;
          text-align: center;
          color: #ef0d0d;
          background: #fff1f2;
          border-radius: 5px;
          line-height: 30px;
        }
      }
    }
  }
}

.tab-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #ffffff;
  box-shadow: 0px -1px 2.5px 1px rgba(0, 0, 0, 0.03), -0.5px 0px 0px 0.5px #ebebeb inset;
  line-height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 6px;
  box-sizing: border-box;

  .confirm {
    height: 30px;
    background: #f1f4ff;
    border-radius: 5px;
    flex: 1;
    text-align: center;
    margin: 0 6px;
    line-height: 30px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: bold;
    color: #4c69dc;
  }

  .reset {
    height: 30px;
    background: #f7f7f7;
    border-radius: 5px;
    flex: 1;
    text-align: center;
    margin: 0 6px;
    line-height: 30px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: bold;
    color: #4c69dc;
  }
}
</style>
